<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>　</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
    <div class="page pic">
        <div id="log_container">
        </div>
        <div id="top">
        </div>

        <div id="middle">
            <div id="time_container">
                <div id="apmOuterWrapper">
                    <div id="apmInnerWrapper">
                        <div id="apm"></div>
                    </div>
                </div>
                <div class="time" id="time"></div>
                <div class="date" id="date"></div>
            </div>
        </div>

        <div id="bottom">
        </div>
    </div>

    <script>
        // 创建XMLHttpRequest对象
        function createXHR() {
            var xhr = null;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;
        }
        // 幻灯片模块 目前API处于开发阶段，请求频率受限，每小时50次
        function picture() {
            var xhr = createXHR();
            xhr.open('GET', 'https://api.unsplash.com/photos/random?client_id=bXwWoUhPeVw-yvSesGMgaOENnlSzhHYB43kZIQOR8cQ', true);
            xhr.onreadystatechange = function() {
                if (this.readyState == 4) {
                    var data = JSON.parse(this.responseText)
                    console.log(data)
                    document.getElementsByClassName('page')[0].style.backgroundImage = 'url(' + data.urls.regular + ')'
                }
            }
            xhr.send(null);
        }

        picture()
        setInterval("picture()", 60 * 1000 * 60)

        // setInterval(function() {
        //   document.getElementsByClassName('page')[0].style.backgroundImage = ''
        //   document.getElementsByClassName('page')[0].style.backgroundImage = 'url(https://source.unsplash.com/random/1072x1448)';
        // }, 1000 * 60)

        // 时钟模块
        function clock() {
            var date = new Date()
            var utc8DiffMinutes = date.getTimezoneOffset() + 480
            date.setMinutes(date.getMinutes() + utc8DiffMinutes)

            var hour = date.getHours()

            var apm = '上<br>午'
            if (hour > 12) {
                apm = '下<br>午'
                hour -= 12
            }

            var timeString = hour + ':' + ('0' + date.getMinutes()).slice(-2)
            var dateString = (date.getMonth() + 1) + '月' + date.getDate() + '日'
            var weekList = ['日', '一', '二', '三', '四', '五', '六']
            var weekString = '星期' + weekList[date.getDay()]

            document.getElementById('apm').innerHTML = apm
            document.getElementById("time").innerHTML = timeString
            document.getElementById("date").innerHTML = dateString + " " + weekString
        }

        clock()

        setInterval("clock()", 60 * 1000)
    </script>
</body>

</html>